<template>
  <div id="centerMap">
    <!-- 地图容器 -->
    <div id="cesiumContainer"></div>
    <!-- 鼠标位置信息 -->
    <div id='mouse_position' v-show="mouse_hover">
      经度:{{longitude}}&nbsp;&nbsp;纬度:{{latitude}}&nbsp;&nbsp;视高:{{height}}km
    </div>
    <!-- 图例 -->
    <div id='legend'>
      <i class="el-icon-info" @click="show=!show" />
      <div class="rec" v-show='show'></div>
      <div class="start" v-show='show'>0</div>
      <div class="end" v-show='show'>5000</div>
    </div>
  </div>

</template>

<script>
//地图相关变量
var viewer=null;
var cesium_token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MTZhYTU2OC1iYWVkLTQ3ZTQtOGI3MC0wOGU4M2ViMTg3M2UiLCJpZCI6MTYwMzgwLCJpYXQiOjE2OTIwMjg5NTB9.DLqrhU4mTDXYMzcz7Js5aWXngoEO_3j2h3O9c26YiMM'
var labelEntity=null;

export default {
  data() {
    return {
      //鼠标位置信息
      mouse_hover: false,
      longitude: '', //经度
      latitude: '',  //纬度
      height: '',    //视高
      //鼠标位置所在省份
      province: null,
      old_province: null,
      //鼠标所在省份的景区个数
      count: null,
      queryProcess: false,
      show: true,
    };
  },
  mounted() {
    this.initViewer()
    this.addSceneryMap()
    this.handleMove()
  },
  methods: {
    //初始化Cesium
    initViewer() {
      Cesium.Ion.defaultAccessToken=cesium_token
      Cesium.Camera.DEFAULT_VIEW_FACTOR=0.4; //摄像机视口远近参数，可设置地球大小
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE=Cesium.Rectangle.fromDegrees(90,-20,110,90); //西南东北，默认显示中国
      //初始化Cesium视图
      viewer=new Cesium.Viewer("cesiumContainer",{
        geocoder: false,              //是否显示位置查找工具
        homeButton: false,            //是否显示首页位置工具
        sceneModePicker: false,       //是否显示视角模式切换工具
        baseLayerPicker: false,       //是否显示默认图层选择工具
        navigationHelpButton: false,  //是否显示导航帮助工具
        animation: false,             //是否显示动画工具
        timeline: false,              //是否显示时间轴工具
        fullscreenButton: false,      //是否显示全屏按钮工具
        infoBox: false,
        imageryProvider: new Cesium.UrlTemplateImageryProvider({ //加载底图
          url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          tilingScheme: new Cesium.WebMercatorTilingScheme(),
          maximumLevel: 10,
        }),
        contextOptions: {
          webgl: {
            alpha: true, //背景透明
          }
        },
      })
      viewer.scene.skyBox.show=false; //关闭天空盒-背景透明
      viewer.scene.backgroundColor=Cesium.Color.TRANSPARENT;//设置背景透明
      viewer.scene.globe.enableLighting=false;
      viewer.shadows=false;
      viewer.scene.sun.show=false; //隐藏太阳
      viewer.scene.moon.show=false;//月亮
      viewer.scene.skyAtmosphere.show=false;//大气
      viewer.scene.fog.enable=false;//雾
    },

    addSceneryMap() {
      //加载景区数量区域发布瓦片
      var sceneryImagery=viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: window.server.GIS_SERVER+"/igs/rest/ogc/WMTSServer",
        layer: '景区数量区域分布瓦片',
        tileMatrixSetID: 'EPSG:4490_景区数量区域分布瓦片_028mm_GB',
        format: 'image/png',
        style: '',
        tilingScheme: new Cesium.GeographicTilingScheme(),
      }));;
      sceneryImagery.alpha=0.8;
    },



    //鼠标移动
    handleMove() {
      let handler=new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction((movement) => {
        //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
        let ellipsoid=viewer.scene.globe.ellipsoid;
        let cartesian=viewer.camera.pickEllipsoid(movement.endPosition,ellipsoid);
        if(cartesian) {
          //显示鼠标位置信息
          this.mouse_hover=true;
          let cartographic=ellipsoid.cartesianToCartographic(cartesian);//将笛卡尔三维坐标转为地图坐标（弧度）
          this.longitude=Cesium.Math.toDegrees(cartographic.longitude).toFixed(4); //经度
          this.latitude=Cesium.Math.toDegrees(cartographic.latitude).toFixed(4); //纬度
          this.height=(viewer.camera.positionCartographic.height/1000).toFixed(2);//视高
        }
        else {
          //隐藏鼠标位置信息
          this.mouse_hover=false;
        }
      },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
  }
}
</script>

<style lang="scss" scoped>
#centerMap {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
#mouse_position {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 8px;
}
::v-deep .cesium-widget-credits {
  display: none;
  visibility: hide;
}
#legend {
  position: absolute;
  left: 28%;
  transform: translate(-28%);
  bottom: 24px;
  user-select: none;
}
.rec {
  position: absolute;
  left: 28%;
  transform: translate(-28%);
  height: 100px;
  width: 16px;
  bottom: 40px;
  background: linear-gradient(
    rgb(255, 125, 161) 0%,
    rgb(255, 125, 161) 16%,
    rgb(255, 140, 125) 16%,
    rgb(255, 140, 125) 32%,
    rgb(255, 174, 139) 32%,
    rgb(255, 174, 139) 48%,
    rgb(255, 240, 101) 48%,
    rgb(255, 240, 101) 64%,
    rgb(159, 224, 128) 64%,
    rgb(159, 224, 128) 80%,
    rgb(50, 197, 233) 80%,
    rgb(50, 197, 233) 100%
  );
}
.start {
  position: absolute;
  left: 28% ;
  transform: translate(-36%) ;
  margin-left: 20px;
  bottom: 24px;
}
.end {
  position: absolute;
  left: 36% !important;
  transform: translate(-36%);
  margin-left: 28px;
  bottom: 140px;
}
</style>
